import React, { useState, useEffect } from 'react'
import { Form, Input, Checkbox, Button } from 'antd'
import { useNavigate } from 'react-router-dom'
import request,{baseUrl} from '@/utils/request'
import Banner from '@/assets/Banner.jpg'
import axois from 'axios'

import { connect } from 'react-redux'

function Login(props) {
    console.log('Login.props', props)
    const { login } = props
    const navigate = useNavigate();

    const onFinish = async (values) => {

        console.log(values);

        // 发起请求
        const { data } = await axois.get(baseUrl+'/api/user/admin_login', {
            params:{
                ...values
            }
        })
        console.log('data', data)

        if (data.code === 200) {
            // 修改全局状态
            login(data.data[0])
            navigate('/manage')
        }
    };


    return (
        <div id='login'>
            <img src={Banner} alt="" />
            <div className='login-page'>
                <h1>趣学面馆后台管理系统</h1>
                <Form
                    name="basic"
                    labelCol={{
                        span: 6,
                    }}
                    wrapperCol={{
                        span: 14,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名',
                            },
                        ]}
                        
                    >
                        <Input style={{backgroundColor:'rgba(0,0,0,.3)',color:'#fff',border:'none'}}/>
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码',
                            },
                        ]}
                    >
                        <Input.Password style={{backgroundColor:'rgba(0,0,0,.3)',color:'#fff',border:'none'}}/>
                    </Form.Item>

                    {/* <Form.Item
                        name="remember"
                        valuePropName="checked"
                        wrapperCol={{
                            offset: 6,
                            span: 14,
                        }}
                    >
                        <Checkbox>免登录</Checkbox>
                    </Form.Item> */}

                    <Form.Item
                        wrapperCol={{
                            offset: 6,
                            span: 14,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>

            </div>
        </div>
    );
}

Login = connect((state) => {
    return {}
}, (dispatch) => {
    return {
        login(userInfo) {
            dispatch({ type: 'login', payload: userInfo })
        }
    }
})(Login)

export default Login;